<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .page {
            width: 1000px;
            height: 50px;
            background-color: #eee;
            margin: auto;
            /* 居中写在父元素上 */
            /* text-align: center; */
            text-align: right;
            /* 消除间距 */
            font-size: 0;
        }

        .page li {
            /* 实现左右排列   浮动  inline-block */
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: #ddd;
            /* 重新写字体大小 */
            font-size: 16px;
            line-height: 50px;
            text-align: center;
            margin: 0 10px;
        }

        .page a {
            display: block;
        }


        .img-list {
            width: 1000px;
            height: 102px;
            background-color: #ddd;
            margin: auto;
            margin-top: 50px;
        }

        .img-list li {
            float: left;
            width: 190px;
            height: 60px;
            border: 1px solid #000;
            margin-right: 8px;


            text-align: center;
            line-height: 60px;
            font-size: 0;
        }

        .img-list li img {
            vertical-align: middle;

            /* 防止图片过大或者过小 */

            /* 最大宽度 */
            max-width: 90%;
            /* 最大高度 */
            max-height: 90%;

            /* 最小值 */
            min-width: 40px;
            min-height: 40px;

        }
    </style>
</head>

<body>

    <ul class="page">
        <li>
            <a href="">1</a>
        </li>
        <li>
            <a href="">2</a>
        </li>
        <li>
            <a href="">3</a>
        </li>
        <li>
            <a href="">4</a>
        </li>
    </ul>



    <!-- 图片的居中 -->
    <ul class="img-list">
        <li>
            <a href="">
                <img src="../images/1.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/index-(3)_02_05.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/main.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/nav-1.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/nav-1.jpg" alt="">
            </a>
        </li>
    </ul>




</body>

</html>